<template>
  <div class="shop">
    <span class="info_title">| 加盟信息</span>
    <el-button type="primary" size="medium" @click="converseChangePartner" style="float:right;width:120px;height:60px">保存</el-button>
    <div class="line"></div>

    <el-form :model="form" label-width="140px" class="demo-ruleForm">
      <el-form-item label="成为合伙人时间：">
        <p>{{parseTime(formData.createTime)}}</p>
      </el-form-item>
      <el-form-item label="类型：">
        <el-radio-group v-model="formData.registerType">
        <el-radio :label="1">企业</el-radio>
        <el-radio :label="2">个人</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="是否特通：">
        <el-radio-group v-model="formData.partnerType">
          <el-radio :label="1">否</el-radio>
          <el-radio :label="2">是</el-radio>
        </el-radio-group>
       
      </el-form-item>

      <el-form-item label="代理区域：">
        <div
          style="float:left;padding:6px 12px;height:42px;line-height:32px;border:1px solid #f2f2f2;border-radius:4px;"
          v-for="(item,index) in areas"
          :key="'s'+index"
        >
          <div
            style="float:left;margin:2px 8px;border-radius:50%;background-color:#666;color:#fff;width:24px;height:24px;line-height:24px;text-align:center;"
          >{{index+1}}</div>
          <span>{{item.path}}-{{item.city}}-{{item.region}}</span>
          <div class="closeArea" @click="closeAreas(item,index)">x</div>
        </div>
        <div class="addAreas" @click="addAreas()">+添加区域</div>
      </el-form-item>
      <el-form-item label="合伙人账号：">
        <p>{{formData.account}}</p>
      </el-form-item>

      <el-form-item label="加盟费信息：">
        <el-input size="mini" style="width:160px;" v-model="formData.franchiseFee">
          <p class="note_back" slot="suffix">元</p>
        </el-input>
        <span style="margin-right:12px;margin-left:12px;">实收款:</span>
        <el-input size="mini" style="width:120px;" v-model="formData.franchisePaid">
          <p class="note_back" slot="suffix">元</p>
        </el-input>
        <span style="margin-right:12px;margin-left:12px;">待收款:</span>
        <el-input size="mini" style="width:120px;" v-model="formData.franchiseUnpaid">
          <p class="note_back" slot="suffix">元</p>
        </el-input>
      </el-form-item>

      <div style="height:24px;">
        <p class="info_title" style="float:left;margin-right:12px;">| 资质信息</p>
        <span class="sub_title">代理商信息完善成功后自动填充，支持本地修改</span>
      </div>
      <div class="line"></div>
      <div style="float:left;width:45%;margin-top:20px;">
        <div
          style="background-color:red;color:#fff;width:120px;text-align:center;
  line-height:24px;height:24px;"
        >基本信息</div>
        <el-form-item v-show="formData.registerType == 1" label="公司名称:" style="margin-top:40px;">
          <el-input
            size="mini"
            v-model="formData.companyName"
            style="width:240px;"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item v-show="formData.registerType == 1" label="法人姓名：" style="margin-top:20px;">
          <el-input
            size="mini"
            placeholder="请输入姓名"
            style="width:240px;"
            v-model="formData.companyLegalname"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系人：">
          <el-input size="mini" v-model="formData.selfName" style="width:240px;" placeholder="请输入联系人"></el-input>
        </el-form-item>

        <el-form-item label="联系电话：">
          <el-input size="mini" v-model="formData.selfPhone" style="width:240px;" placeholder="请输入联系电话"></el-input>
        </el-form-item>

        <el-form-item label="家庭住址:">
          <!-- <el-input size="mini" style="width:140px;" v-model="formData.province" disabled></el-input>
          <el-input size="mini" style="width:140px;" v-model="formData.city" disabled></el-input>
          <el-input size="mini" style="width:140px;" v-model="formData.area" disabled></el-input> -->
          <el-input size="mini" style="width:200px;" v-model="formData.address"></el-input>
        </el-form-item>
      </div>
      <div style="width:1px;background-color:#999;height:360px;float:left;"></div>
      <div style="float:left;width:49%;margin-top:20px;">
        <div
          style="background-color:red;color:#fff;width:120px;text-align:center;
  line-height:24px;height:24px;"
        >资质认证信息</div>

        <el-form-item label="身份证：" class="tel_info">
          <pic-sel style="float:left" v-model="formData.companyLegalFrontcard" />
          <pic-sel style="float:left" v-model="formData.companyLegalBackcard" />
        </el-form-item>
        <el-form-item v-show="formData.registerType == 1" label="营业执照：" class="tel_info">
          <pic-sel style="float:left" v-model="formData.companyLicense" />
        </el-form-item>
      </div>
    </el-form>
    <!-- <jdialog title="请选择代理区域" :visible.sync="showDailiArea" width="480px">
      <div style="height:560px;width:100%;">
        <div style="width:140px;height:100%;background-color:#f5f5f5;float:left;">
          <div
            v-for="(item,index) in provinceList"
            :key="'s'+index"
            style="width:100%;height:42px;text-align:center;line-height:42px;cursor:pointer;"
            @click="onChangeDailiProvinceId(item.id,item.name)"
          >
            <div
              style="float:left;width:4px;height:100%;background-color:#f4222d;"
              v-if="province_add_id == item.id"
            ></div>
            {{item.name}}
            <p style="color:#999;float:right;">></p>
          </div>
        </div>

        <div style="width:160px;height:100%;float:left;">
          <div
            v-for="(item,index) in city_add_list"
            :key="'c'+index"
            style="width:100%;height:42px;text-align:center;line-height:42px;cursor:pointer;"
            @click="onChangeDailiCityId(item.id,item.name)"
          >
            {{item.name}}
            <p style="color:#999;float:right;">></p>
          </div>
        </div>

        <div style="width:180px;height:100%;float:left;">
          <div
            v-for="(item,index) in regin_add_list"
            :key="'r'+index"
            style="width:100%;height:42px;text-align:center;line-height:42px;"
          >
            {{item.name}}
            <div
              style="background-color:#fff;float:right;border:2px solid #f4222d;color:#f4222d;width:14px;height:14px;margin-top:15px;margin-right:12px;cursor:pointer;"
              v-if="region_add_id==item.id"
            >
              <i class="el-icon-check"></i>
            </div>
            <div
              style="background-color:#fff;float:right;border:2px solid #f4222d;width:14px;height:14px;margin-top:15px;margin-right:12px;cursor:pointer;"
              v-else
              @click="selectPartnerRegion(item.id,item.name)"
            ></div>
          </div>
        </div>
      </div>
    </jdialog> -->
    <jdialog title="请选择代理区域" :visible.sync="showDailiArea" width="480px">
      <div style="height:560px;width:100%;">
        <div style="width:140px;height:100%;background-color:#f5f5f5;float:left;">
          <div v-for="(item, index) in provinceList" :key="'s' + index"
            style="width:100%;height:42px;text-align:center;line-height:42px;cursor:pointer;"
            @click="onChangeDailiProvinceIds(index)">
            <div style="float:left;width:4px;height:100%;background-color:#f4222d;" v-if="province_add_id == item.id">
            </div>
            {{ item.name }}
            <p style="color:#999;float:right;">></p>
          </div>
        </div>

        <div style="width:160px;height:100%;float:left;">
          <div v-for="(item, i) in cityLists" :key="'c' + i"
            style="width:100%;height:42px;text-align:center;line-height:42px;cursor:pointer;"
            @click="onChangeDailiCityIds(i)">
            {{ item.name }}
            <p style="color:#999;float:right;">></p>
          </div>
        </div>

        <div style="width:180px;height:100%;float:left;">
          <div v-for="(item, index) in areaLists" :key="'r' + index"
            style="width:100%;height:42px;text-align:center;line-height:42px;">
            {{ item.name }}
            <div
              style="background-color:#fff;float:right;border:2px solid #f4222d;color:#f4222d;width:14px;height:14px;margin-top:15px;margin-right:12px;cursor:pointer;"
              v-if="region_add_id == item.id">
              <i class="el-icon-check"></i>
            </div>
            <div
              style="background-color:#fff;float:right;border:2px solid #f4222d;width:14px;height:14px;margin-top:15px;margin-right:12px;cursor:pointer;"
              v-else @click="selectPartnerRegions(item.code, item.name)"></div>
          </div>
        </div>
      </div>
    </jdialog>
  </div>
</template>

<script>
// import { addPartnerDetailInfo, updatePartnerDetail } from "@/api/service";
// import { provinceCityArea } from "@/api/goods";
// import uploadImg from "@/components/uploadImg";
import { partnerPageList, partnerUpdate, partnerAdd, partnerDetail, partnerDelete, partnerStatistics, partnerRegionTreeList } from '@/api/area.js'
import { regionData, codeToText } from 'element-china-area-data'
import { useCascaderAreaData } from '@vant/area-data';
export default {
  components: {
    'pic-sel': () => import('../../components/PicSel/index'),
  },
  data() {
    return {
      options: regionData,
      regionData:[],
      // 手机号
      phone: "",
      // 联系人
      contact: "",
      province_id: "",
      provinceList: [],
      areaLists: [],
      cityLists: [],
      // provinceList: [],
      city_id: "",
      cityList: [],

      area_id: "",
      townAreaList: [],

      areas: [],
      form: {
        id: "",
        //合伙人账号
        username: "",
        //创建时间
        create_at: "",
        //合伙人类型 1企业，2个人
        partner_type: "",

        address: "",
        province: "",
        city: "",
        area: "",
        //加盟费
        initial_money: "",
        //实收款
        actual_money: "",
        //待收款
        wait_money: "",
        //身份证
        self_front_card: "",
        //营业执照
        company_license: "",
        //公司名称
        company_name: "",
        //法人姓名
        company_legalname: ""
      },
      //代理区域
      showDailiArea: false,
      addTitle: "代理区域详情",
      region_id_arr: [],
      region_arr: [],

      city_id_arr: [],
      city_arr: [],

      province_id_arr: [],
      province_arr: [],

      province_add_id: "",
      province_add_name: "",

      city_add_id: "",
      city_add_name: "",
      city_add_list: [],

      region_add_id: "",
      region_add_name: "",
      regin_add_list: [],
      province_id_address: "",
      city_id_address_list: [],
      city_id_address: "",
      region_id_address_list: [],
      region_id_address: "",
      cityCode: '',
      provinceCode: '',
      countyCode: '',
      memberIdList: [],
      loading:false,
      formData: {
        id: 0,
        account: '',
        memberId: 0,
        accountPassword: '123456',
        provinceCode: 0,
        cityCode: 0,
        districtCode: 0,
        partnerType: 1,
        registerType: 1,
        selfName: '',
        selfPhone: '',
        selfFrontCard: '',
        selfBackCard: '',
        companyName: '',
        companyLicense: '',
        companyLegalname: '',
        companyLegalFrontcard: '',
        companyLegalBackcard: '',
        companyContact: '',
        companyPhone: '',
        endTime: 1,
        transferWay: 0,
        remark: '',
        address: '',
        regionCodes: [],
        franchiseFee: 0,
        franchisePaid: 0,
        franchiseUnpaid: 0,
        contracts: '',
        contractsStart: '',
        contractsEnd: '',
      }
    };
  },
  mounted() {
    this.regionData = useCascaderAreaData()
    this.getproviderRegionProvinceListData()
    // this.getProvinceDataList("1", "0");
    this.formData.id = this.$route.query.partner_id;
    if (this.formData.id) {
      this.getaddPartnerDetailInfoData();
    }
    // this.getcommonChilderRegionList(1,0)
  },
  methods: {
    onChangeDailiProvinceIds(index) {
      this.cityLists = this.provinceList[index].children;
      this.province_add_id = this.provinceList[index].code;
      this.province_add_name = this.provinceList[index].name;
      this.regin_add_list = [];
      // this.getProvinceDataListAddDaili("2", id);
    },

    onChangeDailiCityIds(index) {
      this.areaLists = this.cityLists[index].children;
      this.city_add_id = this.cityList[index].code;
      this.city_add_name = this.cityList[index].name;
    },
    selectPartnerRegions(id, name) {
      if (this.region_id_arr.length < 100) {
        if (this.region_id_arr.length == 0) {
          this.region_add_id = id;
          this.region_add_name = name;

          this.region_id_arr.push(id);
          this.region_arr.push(name);

          this.city_id_arr.push(this.city_add_id);
          this.city_arr.push(this.city_add_name);

          this.province_id_arr.push(this.province_add_id);
          this.province_arr.push(this.province_add_name);
          console.log(this.province_id_arr,this.region_id_arr,this.city_id_arr,'1111')
          this.formData.regionCodes = this.region_id_arr
          this.showDailiArea = false;
        } else {
          if (this.region_id_arr.indexOf(id) == -1) {
            this.region_add_id = id;
            this.region_add_name = name;

            this.region_id_arr.push(id);
            this.region_arr.push(name);

            this.city_id_arr.push(this.city_add_id);
            this.city_arr.push(this.city_add_name);

            this.province_id_arr.push(this.province_add_id);
            this.province_arr.push(this.province_add_name);
            this.formData.regionCodes = this.region_id_arr
            this.showDailiArea = false;




            console.log(this.province_id_arr,this.region_id_arr,this.city_id_arr)
          } else {
            this.$message.error("不能添加相同的代理区域");
          }
        }
      } else {
        this.$message.error("所选代理区域不能超出100个");
      }
    },
    // 请求大区列表
    async getproviderRegionProvinceListData() {
      console.log('请求大区列表')
      let res = await partnerRegionTreeList({ level: 1 })
      if (res.code === 200) {
        this.provinceList = res.data
        console.log(this.provinceList)
      } else {
        this.$message.error(res.message)
      }
    },
    // 删除代理区域
    closeAreas(item, index) {
      if (index == 0) {
        this.areas.shift();
      } else {
        this.areas.splice(index, 1);
      }
    },
    // 新增代理区域
    addAreas() {
      this.showDailiArea = true;
      this.region_id_arr = [];
    },
    async getProvinceDataList(t, p) {
      let res = await provinceCityArea({ type: t, pid: p });

      if (res.code === 200) {
        if (t === "1") {
          this.provinceList = res.data;
          if (this.provinceList.length > 0) {
            this.province_add_id = this.provinceList[0].id;
            this.province_add_name = this.provinceList[0].name;
            this.getProvinceDataListAddDaili("2", this.province_add_id);
          }
        } else if (t === "2") {
          this.cityList = res.data;
        } else {
          this.areaList = res.data;
        }
      }
    },
    onChangeDailiProvinceId(id, name) {
      this.province_add_id = id;
      this.province_add_name = name;
      this.regin_add_list = [];
      this.getProvinceDataListAddDaili("2", id);
    },
    onChangeDailiCityId(id, name) {
      this.city_add_id = id;
      this.city_add_name = name;
      this.getProvinceDataListAddDaili("3", id);
    },
    async getProvinceDataListAddDaili(t, p) {
      let res = await provinceCityArea({ type: t, pid: p });
      if (res.code === 10000) {
        if (t === "1") {
          this.provinceList = res.data;
        } else if (t === "2") {
          this.city_add_list = res.data;
        } else {
          this.regin_add_list = res.data;
        }
      }
    },
    selectPartnerRegion(id, name) {
      if (this.region_id_arr.length < 100) {
        if (this.region_id_arr.length == 0) {
          this.region_add_id = id;
          this.region_add_name = name;

          this.region_id_arr = id;
          this.region_arr = name;

          this.city_id_arr = this.city_add_id;
          this.city_arr = this.city_add_name;

          this.province_id_arr = this.province_add_id;
          this.province_arr = this.province_add_name;

          this.showDailiArea = false;
        } else {
          if (this.region_id_arr.indexOf(id) == -1) {
            this.region_add_id = id;
            this.region_add_name = name;

            this.region_id_arr = id;
            this.region_arr = name;

            this.city_id_arr = this.city_add_id;
            this.city_arr = this.city_add_name;

            this.province_id_arr = this.province_add_id;
            this.province_arr = this.province_add_name;

            this.showDailiArea = false;
          } else {
            this.$message.error("不能添加相同的代理区域");
          }
        }
      } else {
        this.$message.error("所选代理区域不能超出100个");
      }
      this.showAreas();
    },
    showAreas() {
      var areaArr = [];
      this.areas.push({
        region_id: this.region_add_id,
        region: this.region_arr,
        city: this.city_add_name,
        city_id: this.city_id_arr,
        province: this.province_add_name,
        province_id: this.province_id_arr
      });
      this.areas = this.areas.concat(areaArr);
    },
    async getaddPartnerDetailInfoData() {
      let res = await partnerDetail(this.formData.id);
      if (res.code === 200) {
        this.formData = res.data;
        if (this.formData.registerType == 1) {
          // 联系人
          this.contact = this.formData.companyContact;
          // 联系电话
          this.phone = this.formData.companyPhone;
        } else {
          this.phone = this.formData.selfPhone;
          this.contact = this.formData.selName;
        }
        this.formData.partner_type = String(res.data.partner_type);
        this.formData.is_direct = String(res.data.is_direct);

        this.areas = res.data.regionList;
      }
    },
    converseChangePartner() {
      this.getupdatePartnerDetailData();
    },

    async getupdatePartnerDetailData() {
      var dataForm = {};
      const areaArr = [];

      if(this.formData.is_direct == "0") {
        this.areas.map((item) => {
          areaArr.push({
            region_id: item.region_id,
            region: item.region,
            city: item.city,
            city_id: item.city_id,
            province: item.province,
            province_id: item.province_id
          });
        });

      }
      if (this.formData.partner_type == 1) {
        dataForm = {
          initial_money: this.formData.initial_money,
          actual_money: this.formData.actual_money,
          wait_money: this.formData.wait_money,
          partner_type: this.formData.partner_type,
          company_license: this.formData.company_license,
          // self_front_card: this.formData.self_front_card,
          // company_contact: this.formData.company_contact,
          // company_phone: this.formData.company_phone,
          company_name: this.formData.company_name,
          company_legalname: this.formData.company_legalname,
          // 身份证
          company_legal_frontcard: this.formData.self_front_card,
          // 联系人
          company_contact: this.contact,
          // 联系电话
          company_phone: this.phone,
          id: this.formData.id,
          uid:this.formData.uid,
          areas: JSON.stringify(areaArr),
          is_direct: this.formData.is_direct
        };
      } else {
        dataForm = {
          initial_money: this.formData.initial_money,
          actual_money: this.formData.actual_money,
          wait_money: this.formData.wait_money,
          partner_type: this.formData.partner_type,
          // company_license: this.formData.company_license,
          self_front_card: this.formData.self_front_card,
          // company_contact: this.formData.company_contact,
          self_phone: this.phone,
          self_name: this.contact,
          // company_legalname: this.formData.company_legalname,
          id: this.formData.id,
          uid:this.formData.uid,
          areas: JSON.stringify(areaArr),
          is_direct: this.formData.is_direct
        };
      }
      console.log(this.formData);

      let res = await partnerUpdate(this.formData);
      if (res.code === 200) {
        this.$message.success("编辑成功");
      } else {
        this.$message.error(res.message);
      }
    },
    getFile(file) {
      this.form[file.name] = file.files.length > 0 ? file.files[0].url : "";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .info_title {
    font-weight: 700;
    font-size: 16px;
    margin-left: 12px;
  }
  .sub_title {
    font-size: 13px;
    color: #999999;
  }
  .line {
    height: 1px;
    width: 100%;
    background-color: #e5e5e5;
  }
  .time {
    margin-left: 20px;
    float: left;
    width: 45%;
  }
  .tel_info {
    float: left;
    width: 50%;
  }
  .select_name {
    font-size: 12px;
    line-height: 20px;
    margin-left: 12px;
    margin-bottom: 12px;
    float: left;
    border: 1px solid #e5e5e5;
    color: #666666;
    .el-icon-close {
      margin-left: 12px;
      color: #f4222d;
      cursor: pointer;
      // float: right;
    }
  }
  .demo-ruleForm {
    margin-top: 20px;
  }
  .province {
    position: absolute;
    z-index: 999;
    color: #999;
    font-size: 13px;
    margin-left: 15px;
  }
}
.closeArea {
  float: right;
  margin-top: -10px;
  margin-left: 10px;
  cursor: pointer;
  font-weight: bold;
}
.addAreas {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #f2f2f2;
  padding: 6px 12px;
  height: 42px;
  line-height: 32px;
  margin-left: 10px;
  cursor: pointer;
}
.el-icon-check {
  float: right;
  font-size: 10px;
  font-weight: 700;
}
</style>
